<template>
  <div class="pay-ifo">

      <div>
        <go-back class="go-back">
          <template #center> 缴费信息 </template>
        </go-back>
        <bill-category
          class="bill-category"
          :billCategoryInfo="billCategoryInfo"
        ></bill-category>
        <date-time></date-time>
        <pay-info-list
          :totalPay="totalPay"
          :infoList="payInfoList"
        ></pay-info-list>
      </div>

  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import GoBack from '@/components/go-back/go-back.vue'
import BillCategory from './bill-category/bill-category.vue'
import DateTime from './date-time/date-time.vue'
import PayInfoList from './pay-info-list/pay-info-list.vue'
import { useState } from '@/hooks'
import Scroll from '@/components/scroll/scroll.vue'
export default defineComponent({
  props: {

  },
  components: {
    GoBack,
    BillCategory,
    DateTime,
    PayInfoList,
    Scroll
  },
  setup() {
     const billCategoryInfoState = useState('pay',["billCategoryInfo"])
     const payInfoListState = useState('pay',["payInfoList",'totalPay'])

    return {
      ...billCategoryInfoState,
      ...payInfoListState
    }

  }
})
</script>

<style scoped lang="less">
.pay-ifo {
  min-height: 100vh;
  position: relative;
  z-index: 99;
  background-color: white;
  .scroll {
    height: 100vh;
  }
  .go-back {
    padding: 0 6vw;
    min-height: 8vh;
  }
  .bill-category {
  }
}
</style>
